<template>
  <div class="structure-use">
    <PiTable
      border
      rowKey="number"
      :loading
      :tableData
      :tableColumns
      :pagination="page"
      @pageChange="pageChange"
    >
      <template #icon>
        <img src="@/assets/images/icon_part.png" title="部件" />
      </template>
      <template #name="{ row }">
        <el-input v-if="row.status === 'edit'" v-model.trim="row.name" placeholder="请输入" />
        <span v-else>{{ row.name }}</span>
      </template>
      <template #number="{ row }">
        <el-link type="primary" @click="toDetail(row)">{{ row.number }}</el-link>
      </template>
      <template #lifecycleState="{ row }">
        {{ row.lifecycleState.display }}
      </template>
      <template #createTime="{ row }">
        {{ row.createTime && $timeFormat(new Date(row.createTime), 'YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template #handle="{ row }">
        <el-space>
          <el-link type="primary" @click="changeTableData(row)">编辑</el-link>
          <el-link type="danger">删除</el-link>
        </el-space>
      </template>
    </PiTable>
  </div>
</template>

<script setup name="structureUse">
import { usePartStructureStore } from '@/store';

const store = usePartStructureStore();
const loading = ref(false);
const tableData = ref([]);
const { $timeFormat } = window.$fn;
const { partApi } = window.$api;
const router = useRouter();
const route = useRoute();
const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页数
  total: 0, //数据总量
});
const tableColumns = ref();
const oid = computed(() => store.oid);
watch(
  () => oid.value,
  () => {
    getData();
  },
);
onMounted(() => {
  getData();
});
const getData = () => {
  loading.value = true;
  const params = {
    tableID: 'PartUseTable',
    oid: oid.value,
    page: page.pageNum,
    range: page.pageSize,
  };
  partApi.getWTPartUseTable(params).then((res) => {
    loading.value = false;
    if (res.success) {
      tableColumns.value = res.data.columns.map((item) => ({ ...item, sortable: true }));
      tableData.value = res.data.rows;
      page.total = res.data.total;
    }
  });
};
const toDetail = (row) => {
  router.push({
    name: 'partDetail',
    query: {
      oid: row.oid,
    },
  });
};
const pageChange = (pageNum, pageSize) => {
  page.pageNum = pageNum;
  page.pageSize = pageSize;
  getData();
};
</script>

<style scoped lang="less">
.structure-use {
  padding-top: 10px;
}
</style>
